<template>
<!-- 添加/修改请款信息 -->
  <div class="add-container">
    <el-form class="add-panel"
      :model="addPay"
      :rules="rulesAddPay"
    >
      <div class="add-input">
        <el-form-item label-width="120px" class="form-item" prop="name" label="业主名称:">
          <el-input v-model="addPay.name"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" class="form-item" prop="amount" label="请款金额:">
          <el-input v-model="addPay.amount"></el-input>
        </el-form-item>
        <el-form-item label-width="120px" class="form-item" prop="date" label="请款时间:">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="addPay.date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </div>
      <el-form-item label="请款说明:" prop="notes">
        <br>
        <quill-editor
          class="editor"
          ref="myTextEditor"
          v-model="addPay.notes"
          :options="editorOption"
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <!-- <tinymce :height="300" v-model="addPay.notes"/> -->
      </el-form-item>
      <el-form-item class="add-btn">
           <el-button type="primary" @click="onSubmit"> 提交 </el-button>
          </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updatePayment,getPaymenById } from "@/api/payment";
import Tinymce from '@/components/Tinymce'
export default {
  components:{Tinymce},
  data() {
    return {
      key: "",
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加请款说明", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
      message: "",
      addPay: {
        id: "",
        name: "", //业主名称
        amount: "", // 请款金额
        date: "", // 请款时间
        notes: "", // 请款说明
      },
      rulesAddPay: {
        name: [
          {
            required: true,
            message: "请输入业主名称",
            trigger: "change",
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入请款金额",
            trigger: "change",
          },
        ],
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.key = this.$route.query.key;
    if (this.key == "update") {
      const id = this.$route.query.id;
      getPaymenById(id).then(res=>{
        console.log(res);
        // this.addPay = res.data.data
        this.addPay.name = res.data.data.ownerName;
      this.addPay.amount = res.data.data.amount;
      this.addPay.date = res.data.data.updateTime;
      this.addPay.notes = res.data.data.notes;
      this.addPay.id = res.data.data.id;
      this.addPay.sentAmount = res.data.data.sentAmount;
      })
      // console.log(data)
      
    }
  },
  methods: {
    checkAddPay(data) {
      if (!data.name) {
        // console.log("请输入业主名称");
        this.message = "请输入业主名称";
        // this.$message.error(this.message);
        return false;
      } else if (!data.amount) {
        // console.log("请输入请款金额");
        this.message = "请输入请款金额";
        return false;
      } else if (!data.date) {
        // console.log("请选择日期");
        this.message = "请选择日期";
        return false;
      } else {
        this.message = "";
        // console.log("都不为空")
        return true;
      }
    },

    onSubmit() {
      // console.log("提交信息")
      if (this.checkAddPay(this.addPay)) {
        const data = {
          amount: this.addPay.amount,
          date: this.addPay.date,
          notes: this.addPay.notes,
          ownerName: this.addPay.name,
          status: 0,
          remainingAmount:this.addPay.amount-this.addPay.sentAmount,
        };
        if (this.key == "update") {
          data.id = this.addPay.id;
          data.status = this.addPay.status;
        }
        // console.log(data);
        updatePayment(data).then((res) => {
          // console.log(res);
          this.$message({
            type: "success",
            message: (this.key == "update" ? "修改" : "新增") + "成功！",
          });
          this.$router.push({ path: "list"});
        });
      } else {
        if (this.message) this.$message.error(this.message);
        // console.log("信息填写出错")
      }
    },
    onEditorChange(editor) {
      this.content = editor.html;
      console.log(editor);
    },
  },
};
</script>

<style lang="scss" >
// html,
// body,
// #app {
//   height: 100%;
// }

// .home {
//   min-height: 100%;
//   width: 100%;
//   min-width: 750px;
//   background-color: #eeeeee;
// }
// .addPay{
//   .title {
//   text-align: left;
//   /* width: 100%; */
//   padding-left: 20px;
//   border: solid 1px #e4e4e4;
//   height: 55px;
//   line-height: 20px;
//   background-color: #f3f3f3;
//   color: #999999;
//   padding-top: 20px;
//   padding-left: 20%;
//   font-size: 13px;
// }

// .title p {
//   height: 20px;
//   margin: 0;
//   padding-left: 5px;
//   border-left: solid 3px #1abc9c;
// }

// .row {
//   display: flex;
//   flex-direction: row;
// }

// .main {
//   margin-top: 20px;
//   // width: 1100px;
//   width: 100%;
//   border: solid 1px #e4e4e4;
//   padding-top: 0;
//   padding-bottom: 20px;
//   /* width: 80%; */
//   margin-left: 20%;
//   height: 100%;
//   text-align: center;
// }

// .main-title {
//   height: 50px;
//   text-align: left;
//   padding-left: 20px;
//   font-size: 13px;
//   line-height: 50px;
// }

// .main-body {
//   border: solid 1px #e4e4e4;
//   min-height: 150px;
//   background-color: #ffffff;
//   padding-top: 10px;
//   padding-left: 10px;
// }

// .sub-btn {
//   margin-left: 22%;
//   background-color: #1abc9c;
//   color: #ffffff;
//   width: 80px;
//   height: 38px;
// }

// .form-item {
//   min-height: 50px;
//   line-height: 50px;
// }
// .introduce{
//   width: 100%;
//   .el-form-item__content{
//     width: calc(100% - 210px);
//   }
// }

// .body-form {
//   text-align: left;
// }

// .form-item .el-input {
//   width: 220px;
//   margin-top: 10px;
//   border-radius: 0;
// }

// .form-item .el-input__inner {
//   border-radius: 0;
// }
// }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}

</style>